<template>
	<view>
		<view class="top">
			<view class="dateSelect">
				<view style="width: 25%;">选择日期：</view>
				<picker mode="date" :start="startDate" :end="endDate" @change="bindDateChange1"
					style="width: 30%;background-color: #fff;">
					<view class="uni-input">{{this.startTime}}</view>
				</picker>
				<view style="margin-left: 5px;margin-right: 5px;">—</view>
				<picker mode="date" :start="startDate" :end="endDate" @change="bindDateChange2"
					style="width: 30%;background-color: #fff;">
					<view class="uni-input">{{this.endTime}}</view>
				</picker>
			</view>
			<view class="condition">
				<!-- 				<view class="condition-tip">检索: </view> -->
				<view style="display: flex;">
					<view>按地图检索:</view>
					<picker @change="mapConfirm" :value="mapId" :range="mapList" range-key="mapName" class="select">
						<view class="confirm">
							<view style="margin-left: 5px;width: 100%;">{{ mapList[mapId].mapName }}</view>
							<fui-icon name="arrowdown" style="justify-self: flex-end;"></fui-icon>
						</view>
					</picker>
				</view>
				<view style="display: flex;margin-top: 5px;">
					<view>按工人检索:</view>
					<picker class="select1" mode="multiSelector" @columnchange="bindMultiPickerColumnChange"
						@change="workerConfirm" :value="index" :range="workerArray">
						<view class="confirm">
							<view style="margin-left: 5px;width: 100%;">
								{{this.result}}
							</view>
							<fui-icon name="arrowdown" style="justify-self: flex-end;"></fui-icon>
						</view>
					</picker>
					<button type="primary" style="height: 28px;width:60px;font-size: 12px;transform: translateY(-14px);" @tap="taskSearch">搜索</button>
				</view>

			</view>
			<view class="task-body">
				<view v-for="(task, index) in taskList" :key="index" class="task-content">
					<view class="task-left">
						<view class="task-name">{{task.inspectionWork.inspectionWorkName}}</view>
						<view class="task-area">区域：{{task.map.mapName}}</view>
						<view class="task-status">
							<view>状态：</view>
							<view>
								<view style="color: #0A60BD;" v-if="task.inspectionWork.inspectionWorkStatus === 0">处理中</view>
								<view style="color: red;"  v-else-if="task.inspectionWork.inspectionWorkStatus === 1">已超时</view>
								<view style="color: #4CAF50;" v-else-if="task.inspectionWork.inspectionWorkStatus === 2">已完成</view>
								<view style="color: grey;"  v-else-if="task.inspectionWork.inspectionWorkStatus === 3">已取消</view>
								<view style="color: grey;" v-else-if="task.inspectionWork.inspectionWorkStatus === 4">未开始</view>
								<view v-else>未知状态</view>
							</view>
						</view>
						<view class="task-botom">
							<view class="task-schedule">
								进度：{{task.inspectionWork.inspectionWorkFinish}}/{{task.inspectionWork.inspectionWorkNumber}}
							</view>
							<view class="task-time">
								<view class="time-start">
									开始时间：{{formatDate(task.inspectionWork.inspectionStartTime)}}
								</view>
								<view class="time-end">限定完成时间：{{task.inspectionWork.inspectionLimitTime}}小时</view>
							</view>
						</view>
					</view>
					<view class="task-right" @tap="goToTaskInfo(task)">详情-></view>
				</view>
				<view class="tips">没有更多数据了</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../common/request';
	export default {
		data() {
			return {
				date: "",
				startTime:"",
				endTime:"",
				userId: 0,
				taskList: [],
				mapId: 0,
				mapList: [],
				workerArray: [],
				index: [0, 0],
				classId: 0,
				array: [],
				workerId: 0,
				result: "全部",
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			uni.setTabBarItem({
				index: 2,
				visible: true
			})
			uni.setTabBarItem({
				index: 3,
				visible: true
			})
			uni.setTabBarItem({
				index: 0,
				visible: false
			})
			uni.setTabBarItem({
				index: 1,
				visible: false
			})
			let userInfo = uni.getStorageSync('userInfo')
			this.username = userInfo.realName;
			this.userId = userInfo.userId;
			this.getInspection()
			this.date = this.getDate()
			this.startTime = this.getDate('start')
			this.endTime = this.getDate('end')
			this.getMaps()
			this.initData()
			this.taskSearch()
		},
		methods: {
			formatDate(dateString) {
				const timestamp = Date.parse(dateString);
				
				if (isNaN(timestamp)) {
				  console.log("无效时间");
				  return "无效时间"
				} else {
				  const date = new Date(timestamp);
				  date.setMilliseconds(0);  // 精确到秒
				
				  // 获取年、月、日、时、分、秒
				  const offset = 8;  // 东八区时差
				  const year = date.getUTCFullYear();
				  const month = String(date.getUTCMonth() + 1).padStart(2, '0');  // 月份从0开始，所以加1
				  const day = String(date.getUTCDate()).padStart(2, '0');
				  const hours = String(date.getUTCHours()+offset).padStart(2, '0');
				  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
				  const seconds = String(date.getUTCSeconds()).padStart(2, '0');
				
				  // 格式化为 `YYYY:MM:DD:HH:mm:ss`
				  const formattedDate = `${year}:${month}:${day} ${hours}:${minutes}:${seconds}`;
				  console.log(formattedDate);
				  return formattedDate
				}
			},
			bindDateChange1: function(e) {
				console.log("时间")
				console.log(e.detail.value)
				this.startTime = e.detail.value
			},
			bindDateChange2: function(e) {
				this.endTime = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				if (type === 'start') {
					month = month > 1 ? month-1 : 1
					day = month > 1 ? day : 1
				} else if (type === 'end') {
					year = year;
				}
			
				return `${year}-${month}-${day}`;
			},
			goToTaskInfo(task) {
				let schedule = task.inspectionWork.inspectionWorkFinish + '/' + task.inspectionWork.inspectionWorkNumber
				uni.navigateTo({
					url: `/pages/taskManage/taskInfo/taskInfo?name=${task.inspectionWork.inspectionWorkName}&status=${task.inspectionWork.inspectionWorkStatus}&schedule=${schedule}&startTime=${task.inspectionWork.inspectionStartTime}&limitTime=${task.inspectionWork.inspectionLimitTime}&finishTime=${task.inspectionWork.inspectionEndTime}&mapId=${task.map.mapId}&mapName=${task.map.mapName}&inspectionWorkId=${task.inspectionWork.inspectionWorkId}`
				})
			},
			getInspection() {
				request(`/inspection/${this.userId}`, 'GET').then(res => {
					console.log(res.data.data)
					this.taskList = res.data.data
				})
			},
			mapConfirm(e) {
				console.log(e)
				this.mapId = e.detail.value
				console.log("mapId=" + this.mapId)
			},
			initData() { //首次加载渲染 第一列 和 第二列数据
				//获取特定工人列表
				request('/users/account/selectByClass', 'GET').then(res => {
					console.log("获取工人列表:")
					console.log(res)
					this.array = res.data.data
					this.array.unshift({
						classId: 0,
						className: "全部",
						workerList: [{
							userId: 0,
							realName: "全部",
						}]
					})
					const arrayOne = this.array.map(item => {
						return item.className
					})
					const arrayTwo = this.array[0].workerList.map(item => {
						return item.realName
					})
					this.workerArray[0] = arrayOne;
					this.workerArray[1] = arrayTwo;
					console.log("列表:")
					console.log(this.workerArray)
					this.classId = this.array[0].classId;
					this.workerId = this.array[0].workerList[0].userId;
					console.log(this.classId + " " + this.workerId)
				})
			},

			//滚动时候触发,
			bindMultiPickerColumnChange(e) {
				console.log(e.detail.column, "e.detail.column表示是第几列表示是第几列")
				if (e.detail.column === 0) {
					this.workerArray[1] = this.array[e.detail.value].workerList.map(item => {
						return item.realName
					})
					this.initSelect(e.detail.value);
				} else if (e.detail.column === 1) {
					this.index[1] = e.detail.value;
					this.workerId = this.array[this.index[0]].workerList[
						this.index[1]
					].userId;
				}
				console.log(this.classId, "打印第一列id");
				console.log(this.workerId, "打印第二列id");
			},
			// 定义一个传入对应的'下标'为了拿到第一列id 和 第二列的name和id的方法
			initSelect(index) {
				this.classId = this.array[index].classId; //拿到第一列id
				this.index[0] = index
				this.index[1] = 0; //将右边的数组的下标变回第一个显示
				this.$set(this.workerArray, 1, []); //清空对应右边数组的数据
				if (this.array[index].workerList.length === 0) {
					console.log("如果右边长度等于0,那么清掉右边ID");
					this.workerId = "";
				} else {
					console.log("填入右侧数据")
					const arrTwo = this.array[index].workerList.map(item => {
						return item.realName; // 将第一列的workerList的数组遍历 name返回到一个新数组接收
					});
					this.$set(this.workerArray, 1, arrTwo); //重新 赋值到新的数组里

					this.workerId = this.array[index].workerList[0].userId; //那么对应的第二列的第index个id也拿到了
					console.log("workerId=" + this.workerId)
				}
			},
			// 点击确定时触发,
			workerConfirm(e) {
				console.log(this.classId);
				console.log(this.workerId);
				if (this.workerArray[0] === 0) {
					this.result = "全部"
				} else {
					this.result = this.workerArray[0][this.index[0]] + " " + this.workerArray[1][this.index[1]]
				}
				
			},
			getMaps() {
				request('/inspection/map/nopage', 'GET').then(res => {
					console.log(res)
					this.mapList = res.data.data
					this.mapList.splice(0,1)
					this.mapList[0].mapName = "全部"
				})
			},
			taskSearch(){
				uni.showToast({
					title: "正在查询...",
					icon: 'none',
				})
				console.log(this.startTime+" "+this.endTime)
				//进行查询
				request(`/inspection/search/${this.userId}`, 'POST', {
					"startTime": this.startTime,
					"endTime": this.endTime,
					"searchUserId": this.workerId == 0 ? -1 : this.workerId,
					"mapId": this.mapId == 0 ? -1 : (this.mapId+1)
				}).then(res => {
					console.log("查询任务数据完成：")
					console.log(res)
					this.taskList = res.data.data
				})
			}
		}
	}
</script>

<style scoped>
	.top {
		width: 90%;
		margin: 5%;
	}

	.dateSelect {
		height: 25px;
		width: 100%;
		display: flex;
	}

	.condition {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
	}

	.condition-tip {
		display: flex;
		align-items: center;
	}

	.search {
		background-color: #fff;
		margin-left: 10px;
		padding: 3px;
		width: 30%;
	}

	.task-body {
		margin-top: 30px;
	}

	.task-content {
		padding-bottom: 20px;
		display: flex;
		padding: 20px;
		background-color: #fff;
		margin: 10px;
		border-radius: 20px;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
	}

	.task-left {
		display: flex;
		flex-direction: column;
		width: 80%;
	}

	.task-name {
		font-size: 25px;
	}

	.task-botom {
		display: flex;
	}

	.task-schedule {
		text-align: left;
		align-self: center;
		width: 50%;
	}

	.task-time {
		font-size: 10px;
	}

	.task-right {
		align-self: center;
	}

	.tips {
		text-align: center;
		color: gray;
	}

	.select {
		width: 50%;
		margin-left: 10px;
		height: 28px;
	}

	.select1 {
		width: 50%;
		margin-left: 10px;
		height: 28px;
	}

	.confirm {
		background-color: #fff;
		width: 100%;
		height: 28px;
		display: flex;
		justify-content: left;
		font-size: 15px;
		align-items: center;
	}
	
	.task-status{
		margin-bottom: 10px;
		display: flex;
	}
</style>